//放大镜
	class Magnifier {
	   constructor(smallBox, bigBox, mask) {
	    this.smallBox = smallBox;
	    this.bigBox = bigBox;
	    this.mask = mask;
	   }
	   mouseover() {
	    let that = this;
	    this.smallBox.onmouseover = function() {
	     that.mask.style.display = "block";
	     that.bigBox.style.display = "block";
	    }
	   }
	   mouseout(){
	    let that=this;
	    this.smallBox.onmouseout=function(){
	     that.mask.style.display = "none";
	     that.bigBox.style.display = "none";
	    }
	   }
	   mousemove(){
	    let that=this;
	    this.smallBox.onmousemove=function(evt){
	     let e=evt||event;
	     let left=e.pageX-this.offsetLeft-that.mask.offsetWidth/2;
	     let top=e.pageY-this.offsetTop-that.mask.offsetWidth/2;
	     if(left<0){
	      left=0;
	     }
	     let maxLeft=this.offsetWidth-that.mask.offsetWidth;
	     if(left>maxLeft){
	      left=maxLeft;
	     }
	     if(top<0){
	      top=0;
	     }
	     let maxTop=this.offsetHeight-that.mask.offsetHeight;
	     if(top>maxTop){
	      top=maxTop;
	     }
	     // 小图片:大图片=小窗口:大窗口（x）
	     let x=that.bigBox.offsetWidth*left/that.mask.offsetWidth;
	     let y=that.bigBox.offsetHeight*top/that.mask.offsetHeight;
	     that.mask.style.left=left+"px";
	     that.mask.style.top=top+"px";
	     that.bigBox.style.backgroundPositionX=-x+"px";
	     that.bigBox.style.backgroundPositionY=-y+"px";
	    }
	    
	     }

	   eventBind(){
	    this.mouseover();
	    this.mouseout();
	    this.mousemove();
	
	   			}
	   		}
	   	let oSmallBox = document.getElementById("product-img");
	   	let oBigBox = document.getElementById("big-box");
	   	let oMask = document.querySelector("#mask");
	   	let m = new Magnifier(oSmallBox, oBigBox, oMask)
	   	m.eventBind();